<template>
    <div class="input-container">
        <label class="input-label">{{ label }}</label>
        <el-input class="input-content" v-model="inputValue" :placeholder="props.desc" />
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    label: String,
    desc: String,
    rawdata: Array,
    modelValue: String,
});

const emit = defineEmits(['update:modelValue']);

// 使用计算属性实现双向绑定
const inputValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    },
});
</script>

<style scoped>
.input-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.input-label {
    width: 120px;
    /* 固定宽度 */
    font-weight: bold;
}

.input-content {
    flex: 1;
    /* 铺满剩余空间 */
}
</style>